<template>
	<view class="card-detail">
		<view class="top">
			<view style="margin-top: 40rpx;font-weight: 700;font-size: 30rpx;">
				开始时间
			</view>
			<view class="" style="width: 100%;height: 100rpx;background-color: #fff;margin-top: 30rpx;">
				<view class=""
					style="width: 60%;height: 48rpx;float: left;font-size: 40rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					{{data.enddate}}
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;">
					
				</view>
			</view>
			<view style="margin-top: 30rpx;font-weight: 700;font-size: 30rpx;">
				延期至
			</view>
			<u-datetime-picker :show="show" v-model="value1" mode="datetime" @confirm="timelist"
				@cancel="show = false"></u-datetime-picker>
			<view class="" style="width: 100%;height: 100rpx;background-color: #fff;margin-top: 30rpx;" @click="show = true">
				<view class=""
					style="width: 60%;height: 48rpx;float: left;font-size: 26rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					<input type="text" disabled='false' placeholder="请选择日期" v-model="datatime" style="margin-top: 30rpx;"
						placeholder-style="font-size: 26rpx">
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;margin-top: 36rpx;">
					<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
				</view>
			</view>
			<view style="margin-top: 40rpx;font-weight: 700;font-size: 30rpx;">
				延期说明
			</view>
			<view style="width: 100%; height: auto;background: #fff; padding: 20rpx 30rpx; font-size: ;
			margin-top: 30rpx;
			background-color: white;
			border-radius: 7px;">
				<view style="width: 100%;height: 40rpx;font-size: 26rpx;
								font-weight: 500;
								color: #333333;">请输入延期说明</view>
				<textarea  class="input-textare" height="200rpx" margin-top='20rpx'
					placeholder-style="font-size: 26rpx" v-model="order_remarks" />
			</view>
			<view style="margin-top: 40rpx;font-weight: 700;font-size: 30rpx;">
				手续费
			</view>
			<view class="" style="width: 100%;height: 100rpx;background-color: #fff;margin-top: 30rpx;">
				<view class=""
					style="width: 60%;height: 48rpx;float: left;font-size: 40rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					{{data.production}}
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;">
					元
				</view>
			</view>
			<view style="margin-top: 10rpx;font-size: 24rpx;color: #797979;">
				注：延期只修改有效期，卡内余额不变。
			</view>
			<view class="" style="width: 92%;height: 100rpx;position: absolute;bottom: 10rpx;">
				<button style="background-color: #2F75FA; color: #fff;border-radius: 50rpx 50rpx;" @click="yanqi"
					type="default">确认延期</button>
			</view>
		</view>


	</view>
</template>

<script>
	const index = require('@/api/personal/index.js')
	export default {
		data() {
			return {
				data: {},
				cardno: '',
				id: 0,
				show: false,
				value1: Number(new Date()),
				datatime: '',
			}
		},
		onLoad(options) {
			this.cardno = options.cardno
			this.getMyCardDetail()
		},
		methods: {
			timelist(value) {
				this.show = false
				let date = new Date(value.value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				console.log(y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s)
				this.datatime = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
				return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			// 关闭时间弹窗
			showclose() {
				this.show = false
			},
			
			// 获取我的卡包详情
			async getMyCardDetail() {
				let params = {
					cardno: this.cardno,
					project_id: getApp().globalData.projectId,
					user_id: uni.getStorageSync('phone'),
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
				}
				let res = await index.getMyCardDetail(params)
				if (res.code === 1) {
					this.data = res.data.cardData
				}
			},
			
			// 获取我的卡包详情
			async yanqi() {
				let that = this
				if (that.datatime  == '') {
					uni.showToast({
						title: '请输入延期时间',
						icon: 'none'
					})
					return
				}
				if (that.order_remarks  == '') {
					uni.showToast({
						title: '请输入延期说明',
						icon: 'none'
					})
					return
				}
				let params = {
					appid: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					id:this.data.id,
					venue_id:this.data.venue_id,
					price:this.data.production, //价格
					pay_method:1, //支付方式
					order_money:this.data.production, //应付
					remark:this.order_remarks, //备注
					start_date:this.data.enddate, //开始时间
					end_date:this.datatime, //结束时间
				}
				uni.request({
					url: 'http://192.168.1.164/sass-test/public/index.php/api/EditCard/yanqi',
					method: 'POST',
					data: {
						appid: this.$https.weixinAppId,
						project_id: getApp().globalData.projectId,
						id:this.data.id,
						venue_id:this.data.venue_id,
						price:this.data.production, //价格
						pay_method:1, //支付方式
						order_money:this.data.production, //应付
						remark:this.order_remarks, //备注
						start_date:this.data.enddate, //开始时间
						end_date:this.datatime, //结束时间
					},
					header: {
						'content-type': 'application/json', //自定义请求头信息
					},
					success: res => {
						
					}
				});
				// let res = await index.yanqi(params)
				// if (res.code === 1) {
				// }
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");

	.card-detail {
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #eeeeee;
		height: 100vh;

		.top {
			padding: 30rpx;
		}
	}
</style>